<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="user">
          <span style="font-size: 22px; font-weight: normal;color: white"
          >医护人事档案管理系统</span
          >
          <div class="userRight">
            <div style="height: 36px;position: relative;width: 50px;margin-right: 16px;cursor: pointer" @click="handleShowMessage">
              <img src="../assets/msg.png" style="width: 20px;height: 20px">
<!--              <i class="el-icon-message-solid" style="color: white"></i>-->
              <span style="background-color: red;
              width: 10px;
              height: 10px;
              border-radius: 5px;
              position: absolute;
              transform: translate(-6px,4px)">
              </span>
            </div>
            <el-avatar src="https://pic2.zhimg.com/v2-e033acbeacba3cd43e4874b1fa34afc8_r.jpg?source=1940ef5c" style="margin-right:10px;"></el-avatar>
            <el-dropdown trigger="click">
              <span style="cursor: pointer;  color: white;">{{dept}} {{name}}</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="getFile"><i class="el-icon-s-order" style="color:black"></i>个人档案</el-dropdown-item>
                <el-dropdown-item @click.native="exit"><i class="el-icon-circle-close" style="color:black"></i>退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-container>
          <el-aside :width="isCollapse? '60px':'220px'" >
            <el-row  style="height: 100%">
              <el-col :span="23">
                <el-menu
                  :collapse="isCollapse"
                  :default-active="defaultActive"
                  class="el-menu"
                  unique-opened
                >
                  <el-menu-item index="0" @click="toContent" class="levelmenu" v-if="role==1">
                    <i class="el-icon-monitor"></i>
                    <span slot="title">数据看板</span>
                  </el-menu-item>
                  <el-submenu
                    index="1"
                    style="text-algin: center"
                    @click="toContent"
                    v-if="role==1"
                  >
                    <template slot="title">
                      <i style="color:#303133;opacity: 0.6" class="el-icon-s-cooperation"></i>
                      <span slot="title">人事档案</span>
                    </template>
                    <el-menu-item index="1-1" @click="toContent">档案管理</el-menu-item>
                  </el-submenu>
                  <el-submenu index="2">
                    <template slot="title">
                      <i style="color:#303133;opacity: 0.6" class="el-icon-user-solid"></i>
                      <span slot="title">人事调动</span>
                    </template>
                    <el-menu-item index="2-1" @click="toContent" v-if="role==1"
                    >转科管理</el-menu-item
                    >
                    <el-menu-item index="2-2" @click="toContent" v-if="role==1"
                    >调科管理</el-menu-item
                    >
                    <el-menu-item index="2-3" @click="toContent"
                    >我的转科</el-menu-item
                    >
                    <el-menu-item index="2-4" @click="toContent"
                    >我的调科</el-menu-item
                    >
                    <el-menu-item index="2-5" @click="toContent" v-if="role==1"
                    >科室一览</el-menu-item
                    >
                  </el-submenu>
                  <el-submenu index="3" v-if="false">
                    <template slot="title">
                      <i style="color:#303133;opacity: 0.6" class="el-icon-upload"></i>晋升管理
                    </template>
                    <el-menu-item index="3-1" @click="toContent"
                    >晋升管理</el-menu-item
                    >
                    <el-menu-item index="3-2" @click="toContent"
                    >我的晋升</el-menu-item
                    >
                    <el-menu-item index="3-3" @click="toContent"
                    >晋升阈值设置</el-menu-item
                    >
                  </el-submenu>
                  <el-submenu index="4" v-if="role==1">
                    <template slot="title">
                      <i style="color:#303133;opacity: 0.6" class="el-icon-s-tools"></i>
                      <span slot="title">系统设置</span>
                    </template>
                    <el-menu-item index="4-1" @click="toContent"
                    >表单管理</el-menu-item
                    >
                    <el-menu-item index="4-2" @click="toContent"
                    >表单属性管理</el-menu-item
                    >
                    <el-menu-item index="4-3" @click="toContent"
                    >系统提醒设置</el-menu-item
                    >
                  </el-submenu>
                </el-menu>
              </el-col>
<!--              <el-col :span="1">-->
<!--                <div style="background-color:#3a8ee6;position: relative;right: -10px;top: 45%;cursor: pointer;" @click="HandleCollapse">-->
<!--                  <i class="el-icon-arrow-left"></i>-->
<!--                </div>-->
<!--              </el-col>-->
            </el-row>
          </el-aside>

          <el-container>
            <el-main>
              <router-view style="margin-bottom: 80px"></router-view>
              <el-dialog width="1000px" :visible="visible" append-to-body title="消息提示" @close="closeMessage">
                <Message :visible="visible" ref="alerts"></Message>
              </el-dialog>
            </el-main>
          </el-container>

        </el-container>
        <el-footer height="20px" style="line-height: 20px">
          &copy;2022 power by jia
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue
import navMenu from "../components/navMenu";
import Message from "../components/Message/message";
import router from "../router";
export default {
  name: "Home",
  data() {
    return {
      customAsideIsClose:false,
      collapsed: false,
      usertype: true, //true 本地用户 false 免登录用户
      visible:false,
      menulist: [
        {
          name:"数据看板",
          icon:"el-icon-monitor",
          id:"1",
          href:"/show",
          children:[]
        },
        {
          name:"数据看板",
          icon:"el-icon-monitor",
          id:"1",
          href:"/show",
          children:[
            {
              name:"数据看板",
              icon:"el-icon-monitor",
              id:"1",
              href:"/show",
              children:[]
            }
          ]
        },
        {
          name:"数据看板",
          icon:"el-icon-monitor",
          id:"1",
          href:"/show",
          children:[]
        },
        {
          name:"数据看板",
          icon:"el-icon-monitor",
          id:"1",
          href:"/show",
          children:[]
        }
      ],
      value: new Date(),
      name:"",
      dept:"",
      role:"",
      // showMessage:false,
      isCollapse:false,
      defaultActive:'0'
    };
  },
  methods: {
    getFile(){
      this.$router.push('/info');
    },
    closeMessage(){
      this.visible=false;
      this.showMessage=false;
    },
    exit(){
      this.$router.push({name:"login"});
      window.localStorage.clear();
      // this.$router.go(0)
    },
    HandleCollapse(){
      this.isCollapse=!this.isCollapse;
    },
    handleShowMessage(){
      // this.showMessage=true;
      this.visible=true;
    },
    toContent(e) {
      this.showMessage=false
      this.defaultActive=e.index;
      if(e.index == "0"){
        this.$router.push("/show");
      }
      else if (e.index == "1-1") {
        this.$router.push("/index");
      }
      else if(e.index == "2-1"){
        this.$router.push("/turn");
      }
      else if(e.index == "2-2"){
        this.$router.push("/transfer");
      }
      else if(e.index == "2-3"){
        this.$router.push("/myTurn");
      }
       else if(e.index == "2-4"){
        this.$router.push("/myTrans");
      }
      else if(e.index == "2-5"){
        this.$router.push("/dept");
      }
      else if(e.index == "4-1"){
        this.$router.push("/form");
      }
      else if(e.index == "4-2"){
        this.$router.push("/formList");
      }
      else if(e.index == "4-3"){

      }
    },
  },
  mounted() {
    (this.$Watermark.bind(this))();
    this.name=window.localStorage.name;
    this.dept=window.localStorage.dept;
    this.role=window.localStorage.role;
    if (this.role==0){
      this.$router.push('/info');
    }
  },
  // updated() {
  //   this.$refs.alerts.test();
  // },
  components: {
    Message,
    navMenu
    // HelloWorld
  },
};
</script>
<style>
#secondCanvas{
  position:fixed;
  z-index:999;
  top:0;
}
.el-popup-parent--hidden{
  padding: 0 !important;
}
</style>
<style scoped>
.customAsideClose {
  width: 12px !important;
  overflow: hidden;
  padding: 0;
}
.customAsideClose .closeMenu {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  /* Internet Explorer */
  -moz-transform: rotate(180deg);
  /* Firefox */
  -webkit-transform: rotate(180deg);
  /* Safari 和 Chrome */
}
.flexBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.home {
  width: 100%;
  height: 100%;
}
.userRight{
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-header {
  position: relative;
  z-index: 2;
  background-color: rgb(73, 153, 222);
  color: #000;
  text-align: center;
  line-height: 60px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;
}
.el-footer{
  z-index: 2;
  background-color: #fff;
  color: #000;
  text-align: center;
  line-height: 60px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.el-aside {
  background-color: #FFF;
  /*width: 220px !important;*/
  height: 100%;
  color: #fff;
  text-align: center;
  line-height: 100px;
  padding: 10px;
  border-right: gainsboro 1px solid;
}

.el-main {
  position: relative;
  z-index: 1;
  background-color: #fff;
  color: #000;
  text-align: center;
  line-height: 20px;
  /*margin-bottom: 20px;*/
}

body > .el-container {
  margin-bottom: 40px;
}
/deep/ .el-submenu__title:hover {
  /*background-color: rgb(73, 153, 222) !important;*/
}
/deep/ .el-menu-item:hover {
  /*color: white ;*/
  /*background-color: #1AB8E0 ;*/
}
/deep/.el-submenu.is-opened > .el-submenu__title{
  border-left: #44b9e2 3px solid;
  margin-bottom: 1px;
  margin-top: 1px;
}
/deep/ .el-menu-item.is-active{
  color: white !important;
  background-color: #579ae1 !important;
}/deep/ .el-submenu__title{
  background-color: #f5f7fa !important;
  margin: 2px 0;
}
.user {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
   /*align-items: center;*/
  /* float: right;
  align-items: center; */
}
.infolist {
  color: #80848f;
  font-size: 14px;
  display: inline-block;
  margin-right: 15px;
}
.filelist-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/deep/ .el-submenu__icon-arrow {
color: #000 ;
}
.el-dropdown-menu el-popper{
  /* width: 200px; */
}
.el-dropdown-menu__item{
  width: 160px;
  text-align: center;
  margin-top: 10px;
}
/*/deep/ .el-submenu__title{*/
/*  !*border-bottom: #FFF solid 6px;*!*/
/*  margin-top: 1px !important;*/
/*}*/
/*/deep/ .el-menu-vertical-demo .el-menu{*/
/*  background-color: white;*/
/*}*/
.customAside {
  padding: 11px 17px 15px 15px;
  border-right: 1px solid #dadada;
  position: relative;
  /*min-width: 230px !important;*/
}

.customMenu {
  border-right: none;
  width: 180px;
}

.customMenu .el-submenu {
  background: #f5f7fa;
  position: relative;
}

.customMenu .el-submenu__icon-arrow {
  display: none;
}

.customMenu .el-submenu__title {
  border-bottom: 1px solid #fff;
}

.customMenu .el-submenu.is-active .el-submenu__title {
  border-bottom: 1px solid #fff;
}

.customMenu .el-submenu.is-opened > .el-submenu__title {
  color: #4bafd9;
}

.customMenu .el-submenu.is-opened > .el-submenu__title:before {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  content: "";
  width: 3px;
  background: #4bafd9;
  z-index: 2;
}

.customMenu .el-submenu.is-opened > .el-submenu__title .icon-nav {
  background: url(../assets/icon_nav_03.jpg);
}

.customMenu .icon-nav {
  width: 15px;
  height: 15px;
  background: url(../assets/icon_nav_06.jpg);
  display: inline-block;
  margin-top: -2px;
  margin-right: 6px;
}

.customMenu .el-menu-item,
.el-submenu__title {
  height: 46px;
  line-height: 46px;
  padding-right: 0;
}
.customMenu .el-submenu.is-opened i {
  color: #4bafd9;
}

.el-submenu__title:focus,
.el-submenu__title:hover {
  background: #f5f7fa;
}

.el-menu-box {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.el-menu-scroll-box {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 110%;
  padding: 10px 0 10px 10px;
  overflow-y: auto;
  overflow-x: hidden;
}

.customMenu .el-submenu.is-active .el-submenu__title:hover,
.customMenu .el-submenu.is-active .el-submenu__title:active,
.customMenu .el-submenu.is-active .el-submenu__title:focus {
}

.customMenu .el-menu-item:hover,
.customMenu .el-menu-item:active,
.customMenu .el-menu-item:focus {
  background: #fff;
}

.customMenu .el-menu-item.is-active {
  /* color: #4caed9;
  background: #f5f8fa; */
  background: #00afdf;
  opacity: 0.5;
  color: white;
}

.el-submenu .el-menu-item {
  min-width: auto;
  border-bottom: 1px solid #fbfbfb;
}

.closeMenu {
  /*width: 12px;*/
  /*height: 48px;*/
  /*background: url('../assets/closeIcon_bg.png') left top no-repeat;*/
  /*!* 标准的语法 *!*/
  /*position: absolute;*/
  /*right: -1px;*/
  /*top: 50%;*/
  /*margin-top: -24px;*/
  /*line-height: 48px;*/
  /*cursor: pointer;*/
  /*font-size: 10px;*/
  /*color: #fff;*/
  /*overflow: hidden;*/
}

.closeMenu:hover {
  opacity: 0.8;
}

.customAsideClose {
  width: 10px !important;
  overflow: hidden;
  padding: 0;
}
/*.customMenu{*/
/*  background-color: #f5f7fa;*/
/*}*/
/*全局覆盖element按钮的样式以及伪类选择器*/

/*全局禁用文本颜色*/

.el-input.is-disabled .el-input__inner {
  color: #3e3963
}

.el-radio__input.is-disabled .el-radio__inner,
.el-radio__input.is-disabled.is-checked .el-radio__inner {
  border-color: #bac4d8;
}

.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
  background-color: #6b8bcc;
}

.el-textarea.is-disabled .el-textarea__inner {
  color: #3e3963;
}
.levelmenu{
  padding:0px 15px;
  background: #f5f7fa;
  margin-bottom: 1px;
}
.levelmenu:hover{
  background: #f5f7fa;
  color:#303133;
}
.levelmenu.is-active{
  color:#303133;
}
.levelmenu.is-active:hover{
  background: #1AB8E0;
  color:white !important;
}
</style>
